﻿<article id="about">
    <header>
        <h3 id="about-title">
            @Config.AboutTitle
            <span id="about-click">Click here!</span>
        </h3>
    </header>
    <div id="about-text" data-show="false">
        @Html.Raw(Config.AboutText)
    </div>
    <script type="text/javascript">
        var data = { "aboutTitle": $("#about-title"), "aboutText": $("#about-text") };
        data.aboutTitle.click(data, function (e) {
            var aboutTitle = e.data.aboutTitle;
            var aboutText = e.data.aboutText;
            if (window.innerWidth < 1000) {
                if (aboutText.data("show") == false) {
                    aboutText.data("show", true);
                    aboutText.slideDown();
                    $("#about-click", aboutTitle).hide();
                } else {
                    aboutText.data("show", false);
                    aboutText.slideUp();
                    $("#about-click", aboutTitle).show();
                }
            }
        });
        $(window).resize(data, function (e) {
            var aboutTitle = e.data.aboutTitle;
            var aboutText = e.data.aboutText;
            if (e.target.innerWidth >= 1000) {
                aboutText.show();
            } else {
                if (aboutText.data("show") == false) {
                    aboutText.hide();
                    $("#about-click", aboutTitle).show();
                } else {
                    aboutText.show();
                    $("#about-click", aboutTitle).hide();
                }
            }
        });
    </script>
</article>